<template>
  <div class="template">
    <!-- <canvas ref="canvasRef"></canvas> -->
    <canvas id="canvas" width="800" height="800"></canvas>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';

import { FnApp } from './latex/main';
onMounted(() => {
  const canvas = document.getElementById('canvas') as HTMLCanvasElement
  const app = new FnApp(canvas, {
    // leftX: -10,
    // rightX: -10,
    gridCount: 20
  })

  app.addFn(x => 1 / x, 'orange');
  app.addFn(x => x * x, 'cyan');
  app.addFn(x => Math.log(x), 'pink');
  app.addFn(x => Math.sin(x), 'green');
  app.addFn(x => Math.tan(x), 'blue');
  app.draw();
  // app.drawAnimate();
  // @ts-ignore
  window.app = app;
})


// import Two from './core/test';

// const canvasRef = ref()
// const view = new Two()
// onMounted(()=>{
//   view.init()
// })
// onUnmounted(()=>{
//   view.destory()
// })
</script>

<style>
.template canvas {
  border: 1px solid #ccc;
}
</style>